<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>WebSocket</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<input id="CreateSocket" type="button" value="创建WebSocKet" />
<input id="Message" type="text" value=""/>
<input id="Send" type="button" value="发送" />
<input id="Close" type="button" value="关闭WebSocket" />
</body>
<script type="text/javascript">
/**
 * 创建 WebSocKet 的方法
 */
function createWebSocket(urlValue){
    if("WebSocket" in window){
        return new WebSocket(urlValue);
    }
    if ("MozWebSocket" in window){
        return new MozWebSocket(urlValue);
    }
    console.log("浏览器不支持 WebSocKet");
}

/**
 * 1, 创建WebSocket
 * 2, WebScoket 的地址为ws协议
 */
var webSocket = null;
var urlValue = "ws://localhost:8080/socket/WebSocket";

$('#CreateSocket').on('click', function(){
    webSocket = createWebSocket(urlValue);
    // 服务器返回数据时执行
    webSocket.onmessage = function(msg){
        console.log(msg.data);
    }
    // 请求关闭时执行
    webSocket.onclose = function(){
        console.log(arguments);
    }
});

$('#Send').on('click', function(){
    console.log("进入发送--------")
    var message = $('#Message').val().trim();
    console.log("进入发送内容--------"+message);
    if(message == ""){
        console.error("发送的内容不能为空!");
        return;
    }
    if(webSocket == null){
        console.log("未创建 WebSocket 请求!");
        return;
    }
    // 向服务器发送请求的方法
    webSocket.send(message);
    console.log("message=============="+message);
    $('#Message').val("");
});

$('#Close').on('click', function(){
    // 请求关闭时执行
    webSocket.onclose = function(){
        console.log(arguments);
    }
});
</script>